<template>
    <div class="add-goods-container">
      <el-card class="form-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>上架商品</span>
            <el-button type="primary" @click="goBack">返回列表</el-button>
          </div>
        </template>
      
        <el-form ref="goodsForm" :model="form" :rules="rules" label-width="120px" label-position="left">
          <!-- 商品名称 -->
          <el-form-item label="商品名称">
            <el-input v-model="form.name" placeholder="请输入商品名称"disabled/>
          </el-form-item>
          <!-- 商品价格 -->
          <el-form-item label="价格" prop="price">
            <el-input-number v-model="form.price" :min="0.0" :precision="2" :step="0.0" controls-position="right"/>
            <span class="unit">元</span>
          </el-form-item>
          <!-- 推荐语 -->
          <el-form-item label="推荐语" prop="recommend">
            <el-input v-model="form.recommend" type="textarea" :rows="3" placeholder="请输入商品推荐语" maxlength="100" show-word-limit/>
          </el-form-item>
          <!-- 下架时间 -->
          <el-form-item label="下架时间" prop="endTime">
            <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择下架时间" value-format="x" :disabled-date="disabledDate"/>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm">立即上架</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
      
    <script setup>
    import { ref, reactive, onMounted } from 'vue'
    import { ElMessage } from 'element-plus'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    import * as contract from '../../test/Truffle-ABI.js'
    import axios from 'axios';
        
    const router = useRouter()
    const store = useStore()
    const goodsID = store.state.upGoodsID
        
    // 表单数据
    const form = reactive({
      name: '',
      price: 0.0,
      recommend: '',
      endTime:''
    })
        
    // 验证规则
    const rules = reactive({
      name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' },
        { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ],
      price: [
        { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
      endTime: [
        { required: true, message: '请选择下架时间', trigger: 'change' }
        ]
    })
        
    // 时间选择限制
    const disabledDate = (time) => {
      return time.getTime() < Date.now()
    }
    
    // 获取商品信息
    const getShop = async () => {
      await contract.initWeb3()
      const txReceipt = await contract.getGoods(goodsID)
      const response = await axios.get(`http://localhost:3001/api/data/${goodsID}`)
      form.name = response.data.name
      form.price = txReceipt.price/100
      form.recommend = response.data.recommend
    }
  
    //修改商品信息并上架
    const submitForm = async ()=>{
      await contract.initWeb3()
      console.log(form.endTime)
      if (form.endTime==0){
        ElMessage.error({message: `请选择下架时间喵！`,})
        return
      }
      await contract.addGoodsArray(goodsID,form.price*100,form.endTime)
      await axios.put(
        `http://localhost:3001/api/data/${goodsID}`,
        {
          recommend: form.recommend
        })
  
      ElMessage.success(`商品上架成功喵！正在返回个人主页喵`)
      store.commit('setTxt','个人主页')
      router.push('/userInit')
    }
  
    // 表单重置
    const resetForm = () => {
      form.name = ''
      form.price = 0.0
      form.recommend = ''
    }    
    // 返回列表
    const goBack = () => {
      store.commit('setTxt','个人主页')
      router.push('/userInit')
    }
    //钩子函数
    onMounted(() => {
      getShop()
    })
  </script>
      
  <style scoped>
    .add-goods-container {
      padding: 200px
    }
    
    .form-card {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .avatar-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 178px;
      height: 178px;
    }
    
    .avatar-uploader:hover {
      border-color: #409eff;
    }
    
    .unit {
      margin-left: 10px;
      color: #666;
    }
  </style>